<script setup lang="ts">
// const { t } = useI18n();
//跳转错误页面（如果根目录配置了自定义错误页则跳转自定义错误页）
// showError({
//   status: 404,
//   message: 'Page Not Found',
// });
// 设置单个页面标题和描述
const title = ref("域名系统-关于我们");
useSeoMeta({
	title,
	description: () => `description: ${title.value}`
});
definePageMeta({
	layout: "custom", //默认为default，这里修改为自定义layout名即可
	// 页面动画
	pageTransition: {
		name: "rotate"
	}
});
onMounted(() => {
	useGsapAnimation(".about-page_part1");
	useGsapAnimation(".about-page_part2", 0.1);
});
</script>
<template>
	<div class="about-page">
		<client-only />
		<div class="about-page_part1 bg-danger-1">
			<h1>simple parallax sections</h1>
			<img src="~/assets/images/about.png" class="w-full" alt="" srcset="" />
		</div>
		<div class="about-page_common bg-success-4">
			<h1>hi，look a title</h1>
		</div>
		<div class="about-page_part2">
			<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full" alt="" srcset="" />
		</div>
		<div class="about-page_common bg-amber">
			<h1>so smooth though</h1>
		</div>
		<div class="about-page_common bg-white">
			<h1>nice right?</h1>
		</div>
	</div>
</template>
<style scoped lang="less">
.about-page {
	@apply flex flex-col h-full;
	&_common {
		@apply w-full p-4px overflow-hidden z-10;
		height: 80vh;
	}
	&_part1 {
		@apply w-full;

		height: max-content;
		h1 {
			@apply m-0;
		}
	}
	&_part2 {
		@apply w-full;
		height: max-content;
	}
}
</style>
